<template>
    <div class="class404">
        <div class="wscn-http404">
            <div class="child" style="text-align: center">
                <img src="@/assets/errorImg/404.png" alt="" />
            </div>
            <div class="child">
                <div class="title">您访问的页面不存在 !</div>
                <div class="guideClass">
                    请检查您输入的URL是否正确，或单击下面的按钮返回首页。
                </div>
                <el-button type="primary">
                    <router-link to="/"
                        ><el-icon><HomeFilled /></el-icon> 返回首页</router-link
                    >
                </el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import router from "@/router";
// router.push({ path: '/microApp' })
</script>
<style lang="scss" scoped>
.class404 {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 40%;
    left: 50%;
}
.wscn-http404 {
    position: relative;
    width: 1200px;
    padding: 0 50px;
    overflow: hidden;
    display: flex;
    .child {
        width: 50%;
        height: 100%;
        text-align: left;
        .title {
            font-size: 32px;
            font-weight: bold;
            line-height: 40px;
            color: #1482f0;
            opacity: 1;
            margin-bottom: 20px;
            margin-top: 20px;
            -webkit-animation-name: slideUp-data-v-cb6dfc12;
            animation-name: slideUp-data-v-cb6dfc12;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        .guideClass {
            font-weight: 600;
            color: #606266;
        }
        img {
            position: relative;
            float: left;
            width: 600px;
            overflow: hidden;
        }
        .el-button {
            margin-top: 20px;
            padding: 0;
            a {
                display: block;
                height: 40px;
                line-height: 40px;
                width: 98px;
                text-decoration: none;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>
